<!--
 * @Author: panda-hbd 1511539537@qq.com
 * @Date: 2022-11-13 14:40:23
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-19 14:37:44
 * @FilePath: \text-online-system2\src\views\Test.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template >
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow:hidden">
        <el-timeline  v-for="i in count" :key="i" class="infinite-list-item">
          <el-timeline-item timestamp="2018/4/12" placement="top" >
            <el-card style="width: 75rem;" >
                <WorkItem></WorkItem>
            </el-card>
          </el-timeline-item>
          <el-timeline-item style="display:none">
            
          </el-timeline-item>
          <!-- <el-timeline-item timestamp="2018/4/2" placement="top">
            <el-card>
              <h4>Update Github template</h4>
              <p>Tom committed 2018/4/2 20:46</p>
            </el-card>
          </el-timeline-item> --> 
        </el-timeline>
    </ul>
      </template>
      
      <script>
    import WorkItem from '../components/WorkItem.vue'
    
    export default {
        name: 'HomeWprk',
        components: {
            WorkItem,
        },
        data() {
            return {
                count: 0
            };
        },
    
        mounted() {
            
        },
    
        methods: {
            load(){
                this.count += 2
            },
            startDoHomework(){
               this.$router.push('/doingTest')
        }
        },
    };
    </script>
    
    
    <style scoped>
      .infinite-list {
        /* height: 700px; */
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .infinite-list .infinite-list-item {
        display: flex;
        /* align-items: center; */
        /* justify-content: center; */
        /* height: auto; */
        /* background: var(--el-color-primary-light-9); */
        margin: 10px;
        color: var(--el-color-primary);
      }
      .infinite-list .infinite-list-item + .list-item {
        margin-top: 10px;
      }
     
      </style>
      